<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
	<meta name="keywords" contect="吉他女声,吉他女生,女吉他手,雅马哈">
    <title>2016吉他女声-决赛12强</title>
	<link rel="stylesheet" href="/static/web/css/contest/contest.css">
	@include('web.baidu')
</head>
<body>
@include('web.header',['nav' => 3])
	<div id="contest">
		<div class="banner">
			<div class="txt">
				<span class="left-line"><img src="/static/web/images/icon/icon_04.png" /></span>
				<span class="pic animated fadeInDown"><img src="/static/web/images/txt/txt_02.png" /></span>
				<span class="right-line"><img src="/static/web/images/icon/icon_05.png" /></span>
			</div>
		</div>
		<div class="container">
			<ul class="hot-list clearfix">


				@foreach($list as $k => $v)
					<li class="it">
						<div class="info">
							<p class="pic"><span><img src="/{!! $v['avatar'] !!}"/></span></p>
							<p class="name">{!! $v['nick'] !!}</p>
							<p class="loc">{!! $v['area'] !!}</p>
							<p class="button"><a class="btn play" href="javascript:void(0)">听她歌唱</a></p>
							<p class="video-player video-{!! $k !!}" style="display:none">{!! ($v['video']) !!}</p>
						</div>
					</li>
				@endforeach


			</ul>
		</div>
	</div>
	<a class="animated bounceIn" id="share" href="javascript:void(0)"><em class="icon icon-share"></em></a>
@include('web.footer')
	<!-- 视频 -->
<div class="layer" id="vedio-layer">
	<div class="warpper vedio">
		<p id="video_player">
		</p>
		<a class="close-layer" href="javascript:void(0)"></a>
	</div>
</div>
	
	<!-- 分享 -->
<div class="layer" id="share-layer">
    <div class="warpper">
    	<div class="content share-tips clearfix">
	        <em class="icon icon-share-b"></em>
	        <p class="fl txt"><em class="icon icon-share-txt"></em>你喜欢的【吉他女声】至朋友圈，<i>集满30个赞</i>，截图发送至<i>【雅马哈电声乐器】</i>公众号，即可获得<i>定制运动水壶</i>一个（前1000名限定）快为你喜欢的选手拉票吧！
	        </p>
	        <p class="fl pic"><img src="/static/web/images/common/bottle.gif"/></p>
    	</div>
    	<p class="scan-pic"><img src="/static/web/images/common/fxqrcode.png"/><span>扫码分享</span></p>
    </div>
</div>
	<script type="text/javascript" src="/static/web/js/lib/jquery/jquery-2.0.3.min.js"></script>
	<script>
		$(function(){


			$("a.play").each(function (i) {

				$(this).click(function () {
					console.log(1);
					console.log($('.video-' + i).html());
					$('#video_player').html($('.video-' + i).html());

					$('#video_player iframe').height('480').width('100%');
				});
			});



			$(document).on('click', '.play', function(){
				$('#vedio-layer').slideDown('fast');
			}).on('click', '.close-layer', function(){
				$('#vedio-layer').slideUp('fast');
			}).on('click', '#share', function () {
				$('#share-layer').slideDown('fast');
			}).on('click', '#share-layer', function(){
				$(this).slideUp('fast');
			});


		});
	</script>
</body>
</html>